<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <!-- 引入 special 样式 -->
    <link rel="stylesheet" href="/public/css/special.css" />

    <!-- Custom styles for this template -->
    <link href="/public/css/index.css" rel="stylesheet" />
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            aria-expanded="false"
            aria-controls="navbar"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search..." />
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active">
              <a href="#">学生信息 <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">为LPL打Call~~</h1>

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <img
                src="/public/img/FPX.png"
                width="200"
                height="200"
                class="img-responsive"
                alt="Generic placeholder thumbnail"
              />
              {{each comments}}
              <h4>{{$value.title_1}}</h4>
              {{/each}}
              <span class="text-muted">FPX,S11加油</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img
                src="/public/img/EDG.png"
                width="200"
                height="200"
                class="img-responsive"
                alt="Generic placeholder thumbnail"
              />
              {{each comments}}
              <h4>{{$value.title_2}}</h4>
              {{/each}}
              <span class="text-muted">EDG,S11加油</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img
                src="/public/img/LNG.png"
                width="200"
                height="200"
                class="img-responsive"
                alt="Generic placeholder thumbnail"
              />
              {{each comments}}
              <h4>{{$value.title_3}}</h4>
              {{/each}}
              <span class="text-muted">LNG,S11加油</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img
                src="/public/img/RNG.png"
                width="200"
                height="200"
                class="img-responsive"
                alt="Generic placeholder thumbnail"
              />
              {{each comments}}
              <h4>{{$value.title_4}}</h4>
              {{/each}}
              <span class="text-muted">RNG,S11加油</span>
            </div>
          </div>

          <h2 class="sub-header">学生信息</h2>
          <a href="/students/post">
            <button type="button" class="btn add-btn btn-success">
              添加学生
            </button></a
          >

          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="id">id</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>爱好</th>
                  <th class="th_caozuo">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  {{each students}}
                  <td style="width: 150px">{{$value.id}}</td>
                  <td style="width: 120px">{{$value.name}}</td>
                  {{if $value.gender == 0}}
                  <td class="gender" style="width: 90px; padding-left: 14px">
                    男
                  </td>
                  {{else}}
                  <td class="gender" style="width: 90px; padding-left: 14px">
                    女
                  </td>
                  {{/if}}
                  <td style="width: 90px; padding-left: 12px">
                    {{$value.age}}
                  </td>
                  <td style="width: 240px">{{$value.hobbies}}</td>
                  <td class="caozuo">
                    <!-- 当点击 编辑 或 删除 按钮时  会获取被点击的 学生id -->
                    <!-- id={{$value.id}}  是给id  赋值 -->
                    <a
                      href="/students/edit?id={{$value.id}}"
                      class="edit"
                      style="padding-right: 6px"
                      >编辑</a
                    >
                    <a href="/students/delete?id={{$value.id}}" class="del"
                      >删除</a
                    >
                  </td>
                </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
